<template>
    <div class="home_box">
        <div class="left">
            <personal></personal>
            <search @search_click="search_click"></search>
            <weather></weather>
            <echarts></echarts>
        </div>
        <div class="right" ref="community_container" v-loading="is_loading" element-loading-text="数据加载中" element-loading-background="background-color: rgba(255, 255, 255, 1)">
            <div>
                <community
                v-for="(item) in blog_list"
                :data="item"
                :is_like = blog_id_data[item.id]
                :key="item.id"
                ></community>
            </div>

            <div class="pagination">
                <div
                    class="no_data"
                    v-if="total === 0">
                    暂无数据
                </div>
                <el-config-provider :locale="locale" v-if="total !== 0">
                    <el-pagination
                        v-model:current-page="page_number"
                        v-model:page-size="page_size"
                        :page-sizes="page_size_list"
                        size="small"
                        :background="true"
                        layout="jumper, prev, pager, next, sizes, total"
                        :total="total"
                        :disabled="disabled"
                        :pager-count="5"
                        @size-change="handle_size_change"
                        @current-change="handle_current_change" />
                </el-config-provider>
            </div>
        </div>
    </div>
</template>

<script setup>
import personal from './module/personal.vue';
import search from './module/search.vue';
import weather from './module/weather.vue';
import echarts from './module/echarts.vue';
import community from '@/components/blog/community/index.vue';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import { ref, onMounted, nextTick } from 'vue';
import { get_blog_count, blog_paging } from "@/axios/home/index.js"
import { useIndexStore } from '@/store/model';

const store = useIndexStore();

const page_size = ref(10);
const page_number = ref(1);
const page_size_list = [10, 20, 30, 40];
const total = ref(0);
const disabled = ref(false);
const locale = zhCn;
const blog_list = ref([]);
const blog_id_data = ref({});
const is_loading = ref(false);
const community_container = ref(null);
const str_part = ref("")

onMounted(async () => {
    let count = await get_blog_count();
    total.value = count.data.count;
    await update_paging();
});

const handle_size_change = async (size) => {
    if(total.value === 0) {
        return;
    };
    page_size.value = size;
    await update_paging();
};
const handle_current_change = async (number) => {
    if(total.value === 0) {
        page_number.value = 1;
        return;
    };
    page_number.value = number;
    await update_paging();
};

const update_paging = async () => {
    is_loading.value = true
    // 每次更新数据都要先禁用分页器，等数据更新完再启用
    disabled.value = true;
    const data = await blog_paging({
        page_size: page_size.value,
        page_number: page_number.value,
        id:store.user_info.user_id,
        str_part:str_part.value
    });
    total.value = data.data.count;
    blog_list.value = data.data.blog_list;
    blog_id_data.value = data.data.blog_id_dict
    nextTick(() => {
        if (community_container.value) {
            // 滚动到元素所在的位置
            // 这里使用 formElement.offsetTop 获取元素相对于文档顶部的偏移量
            // 你可以根据需要调整第二个参数（垂直方向滚动的偏移量）
            window.scrollTo({
                top: community_container.value.offsetTop,
                behavior: 'auto', // 平滑滚动，可选参数，也可以设置为 'auto'（瞬间跳转）
            });
        }
    });
    disabled.value = false;
    is_loading.value = false
};

const search_click = async (val)=>{
    str_part.value = val;
    page_number.value = 1;
    await update_paging()
}
</script>

<style lang="less" scoped>
.home_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .left {
        width: 4rem;
    }
    .right {
        width: 10rem;
        background-color: @tmb;
        border-radius: 0.12rem;
        padding-bottom: .1rem;
        display: flex;
        flex-direction:column;
        justify-content: space-between;
        .pagination {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            .no_data {
                width: 100%;
                padding-bottom: 0.1rem;
                font-size: 0.2rem;
                font-weight: 900;
                color: @hui_font;
                text-align: center;
            }
            .el-pagination {
                :deep(.el-input--small) {
                    width: 24px !important;
                    height: 24px !important;
                }
                :deep(.el-input__wrapper) {
                    padding: 0 !important;
                }
                :deep(.el-pagination--small .el-select ){
                    width: 80px !important;
                }
            }
        }
    }
}
</style>
